<template>
  <div class="u-top" v-if="!noTop">
    <div class="width-limit">
      <div class="first-line">
        <div class="title">猩猩影视<img :src="logo" alt=""></div>
        <div class="search">
           <el-input v-model="input" placeholder="搜索电影、电视剧、综艺、影人">
            <template slot="append">搜索</template>
          </el-input>
        </div>
        <ul class="tab-list">
          <li :class="{active: current === 'index'}" @click="goToPage('index')">首页</li>
          <li :class="{active: current === 'select'}" @click="goToPage('select')">筛选</li>
        </ul>
      </div>
      <div class="user-nav">
        <div class="btn" v-if="isLogin === '2'" @click="goToLogin">登录</div>
        <div class="btn" v-if="isLogin === '2'" @click="goToRegister">注册</div>
        <div class="btn" v-if="isLogin === '1'" @click="goToLogin">登出</div>
      </div>
    </div>
  </div>
</template>
<script>
const logo = require('../../../public/images/xx_logo.png')
export default {
  name: 'u-top',
  data () {
    return {
      input: '',
      noTop: true,
      current: 'index',
      logo,
      isLogin: '2'
    }
  },
  watch: {
    $route (val) {
      this.noTop = !!(val.meta && val.meta.noTop)
      switch (val.path) {
        case '/movie/list':
          this.current = 'select'
          break
        case 'movie/hot':
          this.current = 'index'
          break
        default:
      }
      this.isLogin = this.$store.state.isLogin
    }
  },
  methods: {
    async goToLogin () {
      await this.logout()
      this.$router.replace({
        path: '/user/login'
      })
    },
    async goToRegister () {
      await this.logout()
      this.$router.replace({
        path: '/user/register'
      })
    },
    async logout () {
      await this.$store.dispatch('LOG_OUT')
    },
    goToPage (current) {
      if (current === this.current) {
        return false
      }
      this.current = current
      switch (current) {
        case 'index':
          this.$router.push({
            path: '/movie/hot'
          })
          break
        case 'select':
          this.$router.push({
            path: '/movie/list'
          })
          break
        default:
      }
    }
  },
  mounted () {
  },
  created () {
  }
}
</script>
<style scoped>
@import url(../../global.css);
.u-top {
  position: fixed;
  width: 100%;
  min-width: 890px;
  background: #fff;
  z-index: 1;
  background: #141414;
  font-size: 14px;
}
.width-limit {
  width: 1040px;
  margin: 0 auto;
  position: relative;
}
.user-nav {
  position: absolute;
  top: 20px;
  right: 0;
  color: #bbc9d4;
  text-align: right;
}
.user-nav .btn {
  display: inline-block;
  height: 38px;
  line-height: 38px;
  margin-left: 30px;
  font-size: 16px;
  cursor: pointer;
}
.first-line {
  display: table;
  padding: 20px 0 20px 15px;
}
.first-line .title {
  color: #bbc9d4;
  font-size: 26px;
  font-weight: bold;
  display: table-cell;
  vertical-align: middle;
  padding-right: 80px;
  padding-left: 50px;
  position: relative;
}
.first-line .title > img {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 0;
  left: 0;
}
.first-line .search {
  position: absolute;
  top: 16px;
  right: 150px;
  vertical-align: middle;
  padding-top: 4px;
}
.first-line .search /deep/ input {
  background: #222;
  color: #9f9f9f;
  width: 320px;
  height: 40px;
  border-radius: 50px 0 0 50px;
  padding-left: 20px;
  outline: none;
  border: none;
}
.first-line .search /deep/ input::-webkit-input-placeholder {
  color: #9f9f9f;
}
.first-line .search /deep/ input::-moz-placeholder {
  color: #9f9f9f;
}
.first-line .search /deep/ input:-moz-placeholder {
  color: #9f9f9f;
}
.first-line .search /deep/ input:-ms-input-placeholder {
  color: #9f9f9f;
}
.first-line .search /deep/ .el-button {
  margin: 0;
  padding: 0;
  color: #fff;
}
.first-line .search /deep/ .el-input-group__append {
  padding: 0;
  width: 90px;
  background: #f42c2c;
  border: 1px solid #f42c2c;
  text-align: center;
  color: #efefef;
  font-size: 16px;
  border-radius: 0 50px 50px 0;
}
.tab-list {
  height: 40px;
  font-size: 16px;
  display: table-cell;
  color: #fff;
  vertical-align: middle;
}
.tab-list > li {
  margin-right: 25px;
  display: inline-block;
  line-height: 40px;
  color: #fff;
  cursor: pointer;
}
.tab-list > li:hover, .tab-list > li.active {
  color: #f42c2c;
}
</style>
